<template>
  <view class="home flex flex-col items-center justify-center">
    <image class="home-bg" src="https://app5.shuguostar.cn/imgs/images/home/bg.png" />

    <view class="home-top">
      <view class="top-avatar flex items-center">
        <image class="avatar" :src="`https://app5.shuguostar.cn/imgs/images/home/${userStore.gender === 'X' ? `boy_${fullClose(1, 2)}` : `girl_${fullClose(1, 2)}`}.png`" />
        <view class="info">
          <template v-if="loginFlag">
            <view class="flex items-center">
              <view class="info-name">
                {{ userStore.userName }}
              </view>
              <image class="info-icon" :src="`https://app5.shuguostar.cn/imgs/images/home/${userStore.gender === 'X' ? 'icon_boy' : 'icon_girl'}.png`" />
            </view>
            <view class="info-time">
              {{ `剩余课时：${userStore.usedHours}/${userStore.courseHours}` }}
            </view>
          </template>
          <view v-else class="info-name">
            请先登录
          </view>
        </view>
      </view>

      <view class="top-progress">
        <view class="progress" :style="{ background: loginFlag && isMember && progress ? `conic-gradient(#48FFBC 0, #FFE871 ${progress - 7}%, transparent ${progress - 7}%, transparent)` : 'conic-gradient(#6BBDFF 0, #6BBDFF 100%)' }" />
        <view v-if="loginFlag && isMember && progress" class="circle-start" />
        <view v-if="loginFlag && isMember && progress" class="circle-end" :style="{ transform: `rotate(${(360 * progress) / 100 + 32}deg) translate(0, -130rpx)` }" />
        <view class="point" />

        <view class="progress-info">
          <view class="info-title">
            阅读任务
          </view>
          <view class="info-num">
            <text class="num">
              {{ loginFlag && isMember ? progress : '?' }}
            </text>
            <text class="symbol">
              /%
            </text>
          </view>
        </view>
      </view>

      <view class="top-info flex items-center">
        <template v-if="getInfo()">
          <image class="info-icon" src="https://app5.shuguostar.cn/imgs/images/home/icon_list.png" />
          <text class="info-name">
            {{ getInfo() }}
          </text>
        </template>
      </view>

      <view v-if="getBtnText()" class="top-btn-wrap flex justify-center">
        <view class="top-btn flex items-center justify-center" @click="hadleClick">
          <text class="btn-text">
            {{ getBtnText() }}
          </text>
          <image class="btn-icon" src="https://app5.shuguostar.cn/imgs/images/home/icon_right.png" />
        </view>
      </view>
    </view>

    <view class="home-content flex-1">
      <view class="result">
        <view class="result-title flex items-center justify-between">
          <text class="left">
            阅读成果
          </text>
          <text class="right">
            打卡天数：{{ loginFlag ? isMember ? readResult?.readDays : 0 : '? ?' }}天
          </text>
        </view>
        <view class="result-content flex justify-between">
          <view class="result-item">
            <view class="item-title flex items-center">
              <image class="title-icon" src="https://app5.shuguostar.cn/imgs/images/home/read.png" />
              <text class="title-name">
                共计阅读书
              </text>
            </view>

            <view class="item-content flex">
              <text class="content-num">
                {{ loginFlag ? isMember ? formatPrice(readResult?.readBooks || 0) : 0 : '? ?' }}
              </text>
              <text class="content-text">
                本
              </text>
            </view>
          </view>

          <view class="result-item">
            <view class="item-title flex items-center">
              <image class="title-icon" src="https://app5.shuguostar.cn/imgs/images/home/text.png" />
              <text class="title-name">
                共计阅读字数
              </text>
            </view>

            <view class="item-content flex">
              <text class="content-num">
                {{ loginFlag ? isMember ? formatPrice(readResult?.readBooksFonts || 0) : 0 : '? ?' }}
              </text>
              <text class="content-text">
                万字
              </text>
            </view>
          </view>
        </view>
      </view>

      <view class="read">
        <view class="read-title flex items-center justify-between">
          <text class="left">
            正在读书
          </text>
          <view v-if="loginFlag && isMember" class="right flex items-center" @click="toCurriculum">
            <text class="text">
              查看课表
            </text>
            <up-icon name="arrow-right" :size="14" />
          </view>
        </view>

        <view class="read-content">
          <ReadItem v-if="loginFlag && isMember && readingBook" :data="readingBook" />
          <view v-else class="no-login flex items-center justify-between">
            <image class="ip-img" src="https://app5.shuguostar.cn/imgs/images/home/IP.png" />

            <view v-if="loginFlag && isMember" class="text-btn">
              已经完成读书任务啦
            </view>
            <view v-else class="text-btn" @click="showOverlay = true">
              联系老师看看我应该怎么读书
            </view>
          </view>
        </view>
      </view>

      <view class="demo-btn" @click="toDemo">
        demo演示
      </view>
    </view>

    <ContactTeacher v-model:show-overlay="showOverlay" />
  </view>
</template>

<script setup lang="ts">
import ReadItem from '@/components/read-item/index.vue';
import ContactTeacher from '@/components/contact-teacher/index.vue';
import { useInfoStore, useUserStore } from '@/store';
import { formatPrice, fullClose } from '@/utils';
import { isLogin } from '@/utils/auth';
import { getCategory, getReadResult, getReadingBook, getTips, getreadTaskRate } from '@/api/home';
import type { ReadResult, ReadingBookResult, TipsResult } from '@/api/home/type';

const userStore = useUserStore();
const infoStore = useInfoStore();
const loginFlag = ref<boolean>(isLogin());

// 进度减7
const progress = ref<number>(0);
const tipInfo = ref<TipsResult>(); // 提示信息
const readResult = ref<ReadResult>(); // 阅读成果
const readingBook = ref<ReadingBookResult>(); // 正在读书
const getData = () => {
  getCategory().then((res: { [key: string]: string }) => {
    infoStore.setInfo(res);
  });

  getreadTaskRate().then((res) => {
    progress.value = Number(res || 0) * 100;
  });

  getTips().then((res: TipsResult) => {
    tipInfo.value = res;
  });

  getReadResult().then((res: ReadResult) => {
    readResult.value = res;
  });

  getReadingBook().then((res: ReadingBookResult) => {
    readingBook.value = res;
  });
};

// 是否是会员
const isMember = computed(() => {
  return userStore.fromVip === 'y' || userStore.fromVip === 'Y';
});

const showOverlay = ref<boolean>(false);

const toCurriculum = () => {
  uni.switchTab({
    url: '/pages/tab/curriculum/index',
  });
};

const getBtnText = () => {
  if (!loginFlag.value) {
    return '点击登录';
  }
  else if (!isMember.value) {
    return '联系老师';
  }
  else if (tipInfo.value?.tip === 'tip1') {
    return '课前预习';
  }
  else if (tipInfo.value?.tip === 'tip2') {
    return '闯关打卡';
  }
  else {
    return '';
  }
};

const getInfo = () => {
  if (tipInfo.value?.tip === 'tip1') {
    return '你还有一节课前预习未完成';
  }
  else if (tipInfo.value?.tip === 'tip2') {
    return '今日阅读闯关打卡还未完成';
  }
  else {
    return '';
  }
};

const hadleClick = () => {
  if (!loginFlag.value) {
    uni.navigateTo({
      url: '/pages/common/login/index',
    });
  }
  else if (!isMember.value) {
    showOverlay.value = true;
  }
  else if (tipInfo.value?.tip === 'tip1') {
    uni.navigateTo({
      url: `/pages/views/preview/index?url=${tipInfo.value.JwAttendClassStudent.vidoUrl}`,
    });
  }
  else if (tipInfo.value?.tip === 'tip2') {
    uni.navigateTo({
      url: `/pages/views/game/index?courseId=${tipInfo.value.JwAttendClassStudent[0].courseId}&bookName=${tipInfo.value.JwAttendClassStudent[0].bookName}}&acsId=${tipInfo.value.JwAttendClassStudent[0].id}`,
    });
  }
};

const toDemo = () => {
  uni.navigateTo({
    url: `/pages/views/game/index?isDemo=true&bookName=demo演示`,
  });
};

onShow(async () => {
  if (loginFlag.value) {
    const res = await userStore.info();
    if (!res)
      return;
    getData();
  }
});

// 分享
uni.showShareMenu({
  withShareTicket: true,
  menus: ['shareAppMessage', 'shareTimeline'],
});
onShareAppMessage(() => {
  return {
    title: '雨果读书',
    imageUrl: 'https://app5.shuguostar.cn/imgs/images/home/share.png',
  };
});
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;

  .home-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 750rpx;
    height: 696rpx;
  }

  .home-top {
    width: 100%;
    position: relative;
    padding: 100rpx 80rpx 80rpx 32rpx;
    margin-bottom: 80rpx;

    .top-avatar {
      .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-right: 8rpx;
        overflow: hidden;
      }

      .info {
        padding: 6rpx 0;

        .info-name {
          padding-right: 8rpx;
          line-height: 40rpx;
          font-size: 28rpx;
          font-weight: 500;
          color: #fff;
        }

        .info-icon {
          width: 24rpx;
          height: 24rpx;
        }

        .info-time {
          line-height: 24rpx;
          font-size: 20rpx;
          color: #fff;
        }
      }
    }

    .top-progress {
      position: absolute;
      top: 240rpx;
      right: 80rpx;
      width: 280rpx;
      height: 280rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      .progress {
        position: absolute;
        margin: auto;
        width: 280rpx;
        height: 280rpx;
        border-radius: 50%;
        mask: radial-gradient(transparent, transparent 120rpx, #000 120rpx, #000 0);
        transform: rotate(58deg);
      }

      .circle-start {
        position: absolute;
        top: 130rpx;
        left: 130rpx;
        width: 20rpx;
        height: 20rpx;
        border-radius: 50%;
        background: #48FFBC;
        z-index: 1;
        transform: rotate(58deg) translate(0, -130rpx);
      }

      .circle-end {
        position: absolute;
        position: absolute;
        top: 130rpx;
        left: 130rpx;
        width: 20rpx;
        height: 20rpx;
        border-radius: 50%;
        background: #FFE871;
        z-index: 1;
      }

      .point {
        position: absolute;
        top: 0;
        left: 132rpx;
        &::after {
          content: "";
          position: absolute;
          top: 120rpx;
          left: -12rpx;
          width: 40rpx;
          height: 40rpx;
          border-radius: 50%;
          background: #A1D5FF;
          z-index: 1;
          transform: rotate(45deg) translate(0, -130rpx);
        }

        &::before {
          content: "";
          position: absolute;
          top: 132rpx;
          left: 0;
          width: 16rpx;
          height: 16rpx;
          border-radius: 50%;
          background: #C9E7FF;
          z-index: 2;
          transform: rotate(45deg) translate(0, -130rpx);
        }
      }

      .progress-info {
        position: relative;
        width: 204rpx;
        height: 204rpx;
        padding: 40rpx 0;
        background: #6BBDFF;
        border-radius: 50%;
        box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(0, 0, 0, 0.04);

        .info-title {
          font-size: 28rpx;
          line-height: 40rpx;
          text-align: center;
          color: #fff;
        }

        .info-num {
          display: flex;
          justify-content: center;
          align-items: baseline;

          .num {
            font-size: 72rpx;
            font-weight: 500;
            color: #fff;
          }

          .symbol {
            font-size: 20rpx;
            line-height: 28rpx;
            color: #fff;
          }
        }
      }
    }

    .top-info {
      padding-top: 396rpx;
      height: 436rpx;

      .info-icon {
        width: 24rpx;
        height: 24rpx;
      }

      .info-name {
        padding-left: 10rpx;
        font-size: 28rpx;
        line-height: 40rpx;
        color: #fff;
      }
    }

    .top-btn-wrap {
      position: absolute;
      left: 0;
      right: 0;
      bottom: -48rpx;
      height: 96rpx;

      .top-btn {
        padding: 0 56rpx;
        background: linear-gradient( 138deg, #FBE363 6%, #FEBF37 100%);
        border-radius: 200rpx;

        .btn-text {
          padding-right: 16rpx;
          font-size: 34rpx;
          line-height: 48rpx;
          color: #fff;
        }

        .btn-icon {
          width: 28rpx;
          height: 28rpx;
        }
      }
    }
  }

  .home-content {
    width: 100%;
    padding: 0 32rpx 40rpx;
    overflow: auto;

    .result {
      padding: 40rpx 0;

      .result-title {
        .left {
          font-size: 36rpx;
          line-height: 60rpx;
          color: #333;
        }

        .right {
          height: 60rpx;
          padding: 0 32rpx;
          background: #E6F7FF;
          border-radius: 32rpx;
          font-size: 28rpx;
          line-height: 60rpx;
          color: #4AAAF8;
        }
      }

      .result-content {
        padding-top: 32rpx;

        .result-item {
          width: 328rpx;
          height: 192rpx;
          padding: 32rpx;
          background: #FFFFFF;
          box-shadow: 0rpx 0rpx 32rpx 0rpx rgba(132, 179, 245, 0.08);
          border-radius: 20rpx;

          .item-title {
            .title-icon {
              width: 48rpx;
              height: 48rpx;
            }

            .title-name {
              padding-left: 8rpx;
              line-height: 48rpx;
              font-size: 28rpx;
              font-weight: 500;
              color: #333;
            }
          }

          .item-content {
            padding-top: 12rpx;
            align-items: flex-end;

            .content-num {
              font-size: 48rpx;
              line-height: 68rpx;
              color: #333;
            }

            .content-text {
              padding-left: 8rpx;
              font-size: 28rpx;
              font-weight: 500;
              line-height: 64rpx;
              color: #333;
            }
          }
        }
      }
    }

    .read {
      padding: 40rpx 0;

      .read-title {
        .left {
          font-size: 36rpx;
          line-height: 60rpx;
          color: #333;
        }

        .right {
          height: 60rpx;

          .text {
            font-size: 28rpx;
            color: #888888;
          }
        }
      }

      .read-content {
        padding-top: 32rpx;

        .no-login {
          padding: 40rpx 40rpx 52rpx 32rpx;
          background: #fff;
          border-radius: 20rpx;

          .ip-img {
            width: 176rpx;
            height: 252rpx;
          }

          .text-btn {
            padding: 0 24rpx;
            font-size: 28rpx;
            line-height: 56rpx;
            color: #fff;
            border-radius: 28rpx;
            background: #4AAAF8;
          }
        }
      }
    }

    .demo-btn {
      width: 100%;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      color: #fff;
      background: #6BBDFF;
      margin-bottom: 20rpx;
      border-radius: 12rpx;
    }
  }
}

:deep(.uicon-arrow-right) {
  color: #888 !important;
}

:deep(.u-line-progress__line) {
  background: rgba(74, 170, 248, 0.6) !important;
}
</style>
